<template>
<!-- 	<view class="content">
		<view class="top flex flex-row justify-between  items-center w100">
			<view class="xzx flex flex-row  items-center">
				<view class="flex flex-row justify-end">
					<u-icon name="arrow-left" size="24"></u-icon>
				</view>
			</view>
			<view class="search flex flex-row justify-start items-center">
				<u-icon name="search" color="#2979ff" size="18"></u-icon>
				<input type="text" value="" v-model="keywords" placeholder="搜索" />
			</view>


		</view> -->

		<view class="list flex flex-col justify-start items-center">
			<view class="banner w100">
				
				     <swiper class="topView" indicator-dots="true" autoplay="true" :interval="interval" duration="400">
				     	<swiper-item v-for="(item, index) in list" :key="index" @click="gomenu(item.url)">
				     
				     		<view class="topView">
				     			<image class="topView" :src="$util.img(item.image) " mode="widthFix" lazy-load="true"
				     				:data-index="index">
				     
				     			</image>
				     		</view>
				     
				     
				     	</swiper-item>
				     
				     
				     </swiper>

			</view>
		<!-- 	
		<view class="flex flex-row justify-start items-center w100 mt_40">
			<view class="f_28 c_6d w256 flex justify-center items-center nav" @click="tab(0)" :class="active==0?'c_blue f_32 active':''">议事协商</view>
			<view class="f_28 c_6d w256 flex justify-center items-center nav" @click="tab(1)"  :class="active==1?'c_blue f_32 active active_two':''">协商结果</view>
		</view> -->
		<view class="flex flex-col justify-start items-center w100  bgwhite"  v-if="active==0"  style="padding-bottom: 150rpx;">
			<!-- <view class="flex flex-row justify-start items-center w100 bgwhite" style="padding-top:40rpx;">
				<view class="flex flex-row items-center justify-start w300">
					<text class="f_32 c_6">我的信息(匿名保密)</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="name" placeholder="请输入姓名"/>
				</view>
				
			</view> -->
		<view class="flex flex-row justify-between items-center w100 bgwhite">
			<view class="flex flex-row items-center justify-start w200">
				<text class="f_32 c_6">选择类型</text>
				<text class="orange f_32">*</text>
			</view>
			<view class="mright flex flex-row justify-between" style="width: 450rpx;">
				<picker :value="typeValue" :range="arr"  @change="chooseHobby">
					<view class="mright flex flex-row justify-between" style="width: 450rpx;">
						<text>{{typeValue?arr[typeValue]:'请选择类型'}}</text>
				
					<u-icon name="arrow-right"></u-icon>
					</view>
				</picker>
			
				
			</view>
			
		</view>
			<view class="flex flex-row justify-start items-center w100 bgwhite">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">姓名</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="name" placeholder="请填写姓名"/>
				</view>
				
			</view>
			<view class="flex flex-row justify-start items-center w100 bgwhite">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">小区地址</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="address" placeholder="请输入(例:凤凰小区18栋101)" style="width: 400rpx"/>
				</view>
				
			</view>
			<view class="flex flex-row justify-start items-center w100 bgwhite">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">手机号</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright">
					<input type="text" value=""  v-model="phone" placeholder="请填写手机号"/>
				</view>
				
			</view>
			<view class="flex flex-row justify-start items-center w100 bgwhite">
				<view class="flex flex-row items-center justify-start w200">
					<text class="f_32 c_6">短信验证</text>
					<text class="orange f_32">*</text>
				</view>
				<view class="mright flex flex-row justify-between" style="width: 500rpx;">
					<input type="text" value=""  v-model="code" placeholder="请输入验证码" style="width: 300rpx;"/>
					<view class="box-item-code c_blue" @tap="countDown">{{ tip }}</view>
				</view>
				
			</view>
			
						
		
			
			
				
				<view class="flex flex-col justify-between items-start w100  bgwhite" >
					<view class="flex flex-row items-center justify-start w200">
						<text class="f_32 c_6">详细描述</text>
						<text class="orange f_32">*</text>
					</view>
					<textarea value="" placeholder="请详细描述信息"  v-model="desc"/>
					
				</view>
				
				<view class="flex flex-col justify-between items-start w100  bgwhite" >
					<view class="flex flex-col items-center justify-center items_tu" @click="upload"
						v-if="d_img==''">
						<i class="iconfont icon-jiahao c_80 f_32"></i>
						<text class="f_20 c_80 mt10" style="font-size: 20rpx;">举报、投诉，建议图片上传</text>
					</view>
					<view class="" v-else @click="upload">
						<image :src="d_img" mode="" style="width: 288rpx;height: 162rpx;border-radius: 10rpx;">
						</image>
					</view>
					
				</view>
				<view class="fixedbtn flex flex-row justify-between  u-fixed-bottom">
				
				  <view class="btn background_blue" :class="{'mb_20': !isIPhoneX}" @click="sub_draw">
				    提交</view>
				
				
				</view>
		</view>
		
			<view class="flex flex-col justify-start items-center w100 actile_list" v-else>
				<view class="flex flex-col w100  itemall" v-for="(item,index) in result" >
					<view class="flex flex-col">
						<view class="flex flex-row">
							<image :src="item.avatar" mode="" class="avathor"></image>
							<view class="flex flex-col info">
								<view class="f_32 c_3d">{{item.name}}</view>
								<view class="f_28 c_9d">
									<text>{{item.title}}</text>
									<text class="tag">{{item.type}}</text>
								</view>
							</view>
						</view>
						<view class="info_all">
							<view class="f_28 c_6d mt_20">
								<rich-text :nodes="item.descroption"></rich-text>
							</view>
							<view class="flex flex-row mt_20 w100 flex-wrap justify-between items-center" v-if="item.image">
								<view class="flex flex-row   "  >
									<image class="img_tu" :src="$util.img(item.image)" mode="scaleToFill"></image>
								</view>
								
							</view>
						</view>
					</view>
				
				</view>
			</view>
			
			
			
		</view>
	</view>
</template>

<script>
	import http from 'common/js/http.js';
	export default {
		mixins:[http],
		data() {
			return {
				name:'',
				address:'',
				zhuti:'',
				d_img:'',
				result:[
				
				],
				desc:'',
				active:0,
				typeValue:'',
				arr:[
				'举报','反馈','提问','表扬','投诉','建议'
				],
				article:[
					{
						img:'../../static/image/banner@2x.png',
						name:'小网格，大作用，警民联心救困者',
						desc:'严桥好人朱巨柏先进事迹测试文qqqq字长度...',
						time:'2023.11.08'
					},
					{
						img:'../../static/image/banner@2x.png',
						name:'小网格，大作用，警民联心救困者',
						desc:'严桥好人朱巨柏先进事迹测试文qqqq字长度...',
						time:'2023.11.08'
					},
				],
				interval:2000,
				list: [
					

				],
				menu:[{						poster: '../../static/image/yishixieshangicon.png',						text:'议事协商'					},					{						poster: '../../static/image/xieshangjieguoicon@2x.png',						text:'协商结果'					},					{						poster: '../../static/image/juweixinxiangicon@2x.png',						text:'居委信箱'					},					{
						poster: '../../static/image/yijianzhengjiicon@2x.png',
					
						text:'意见征集'
					},
															],
				keywords: '',
				city: '',
				rangeArr: [{
					text: '建湖县',
					value: 0

				}],
				tip: '获取验证码',
				fs:true,
				time:0,
				phone:'',
				code:''
			}
		},
		onLoad(data) {
this.getbanner()
this.getresult()
if(data.id){
	this.active = data.id
}
		},
		methods: {
			
		countDown(){
		  if(this.phone=='') {
		    return uni.showToast({
		      title: '请输入正确的手机号',
		      icon: 'none'
		    })
		  }
		  console.log(222)
		   if (this.time == 0) {
			   
		     this.time = 60
			 if(this.fs){
				 this.fs=false
				 this.sendRequest({
					 url:'government/sendSms',
					 data:{
						 mobile:this.phone
					 },
					 success:res=>{
						 uni.showToast({
						 	title:'发送成功'
						 })
					 }
				 })
			 }
		     var timer = setInterval(() =>{
		       this.time--;
		       this.tip = this.time+'秒';
		       if(this.time==0){
		         clearInterval(timer)
		         this.tip = '获取验证码'
				 this.fs=true
		       }
		    },1000)
		   }
		},
		sub_draw(){
			if(this.typeValue==''){
				this.$util.showToast({
					title:'请选择类型',
					
				})
				return 
			}
					
			if(this.name==''){
				this.$util.showToast({
					title:'请填写姓名',
					
				})
				return 
			}
		
			
			if(this.phone==''){
				this.$util.showToast({
					title:'请填写手机号',
					
				})
				return 
			}
			if(this.code==''){
				this.$util.showToast({
					title:'请输入手机验证码',
					
				})
				return 
			}
			if(this.address==''){
				this.$util.showToast({
					title:'请填写居住地址',
					
				})
				return 
			}
		
		if(this.desc==''){
			this.$util.showToast({
				title:'请详细描述信息',
				
			})
			return 
		}
					
		
			uni.showLoading({
				title:'提交中'
			})
			this.sendRequest({
				url: 'government/addopinion',
				data: {
					type:this.arr[this.typeValue],
					town_id:1,
					name:this.name,
					mobile:this.phone,
					code:this.code,
					description:this.desc,
					village:this.address,
					image:this.d_img,
					description:this.desc
				},
				success: res => {
					console.log(res)
					uni.hideLoading()
					if (res.code == 1) {
										
							this.$util.showToast({
								title: '提交成功!'
							})
							
						
						setTimeout(e => {
							
							uni.navigateBack()
						}, 1500)
					
					}else{
						this.$util.showToast({
							title: res.msg
						})
					
					}
				}
			})
		},
		chooseHobby(e){
			this.typeValue = e.detail.value
		},
			upload() {
				// 选取本地图片
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
			
						this.tempFilePath = res.tempFilePaths[0];
						console.log(res)
						uni.uploadFile({
							url: 'https://cun.polarislaser.cn/api/volunteer/upload',
			
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								'content-type': 'multipart/form-data'
							},
							success: e => {
								console.log(e)
								this.d_img = JSON.parse(e.data).data.fullurl
								//	that.tailorPath = that.$util.img(res.data)
							},
							fail: function(err) {
								console.log('err', err)
							},
							complete: function(e) {
			
								console.log(e)
			
							}
						})
					}
				});
			},
			gomenu(url) {
				uni.navigateTo({
					url: url
				})
			},
			getbanner(){
				this.sendRequest({
					url: 'cun/block',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.list = res.data
						}
					}
				})
			},
			tab(e){
				this.active = e
			},
	
			getresult(){
				this.sendRequest({
					url: 'cun/discussionlist',
					data: {
						town_id: 1
					},
					success: res => {
						console.log(res)
						if (res.code > 0) {
				
							this.result = res.data
						}
					}
				})
			},
			bindPickerChange(e) {
				console.log(e.detail.value)
				this.city = this.rangeArr[e.detail.value].text

			}
		}
	}
</script>
 
<style lang="scss">
	.actile_list{
		width: 100%;
		background: #fff;
		padding: 40rpx;
		.itemall{
			border-bottom: 1rpx solid #E6E6E6;
			padding: 40rpx 0;
		}
		.itemall:last-child{
			border-bottom: 0;
		}
		.avathor{
			width: 80rpx;
			height: 80rpx;
			border-radius:10rpx;
		}
		.info{
			margin-left: 10rpx;
			.tag{
				height: 28rpx;
				color: #0256FF;
				font-size:18rpx ;
				background: rgba(2,86,255,0.1);
				border: 1rpx solid #0256FF;
				border-radius: 4rpx 4rpx 4rpx 4rpx;
				padding: 5rpx 10rpx;
				margin-left: 10rpx;
			}
		}
		.info_all{
			.img_tu{
			width: 288rpx;
			border-radius: 16rpx;
			height: 162rpx;	
			
			}
			
		}
	}
	.items_tu{
		width: 288rpx;
		height: 162rpx;
		background: #F5F6F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		
	}
	textarea{
		width: 90%;
		height: 150rpx;
		padding: 40rpx;
		margin-top: 20rpx;
		background-color: #F9F9F9;
	}
	.w100{
		
	}
	.bgwhite{
		background: #fff;
		border-bottom: 1rpx solid #f9f9f9;
		padding: 30rpx 20rpx;
	}
	.content{
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
	}
	.orange{
		margin-left:  10rpx;
	}
	.w200{
		width: 200rpx;
	}
	.w320{
		width: 360rpx;
	}
	.mright{
		width: 500rpx;
	}
	.w300{
		width: 290rpx;
	}
	.nav{
		height: 70rpx;
	}
	.active{
		background-color: #fff;
		border-radius: 0 100rpx 0 0;
	}
	.active_two{
		background-color: #fff;
		border-radius: 100rpx 100rpx  0 0;
	}
	.w256{
		width: 256rpx;
	}
	.artice_list{
		padding: 20rpx 35rpx;
		.items{
			margin-bottom: 30rpx;
		}
		.a-img{
			width: 120rpx;
			height: 120rpx;
			border-radius: 8rpx;
		}
		.read{
			width: 76rpx;
		}
		.info{
			width: 500rpx;
			.title{
				width: 100%;
				margin-bottom: 5rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	.grb{
		margin-top:40rpx;
	}
	.grb-img{
		width: 200rpx;
	}
	page{
		background: #F9F9F9;
	}
	.menu{
		margin-top: 40rpx;
		.menu-item{
			width: 33.3%;
			margin: 20rpx 0;
			.menu-icon{
				width:80rpx ;
			}
		}
	}
	.banner{
		border-radius: 10rpx;
	}
	wx-swiper .wx-swiper-dot {
		
		background: rgba(0,0,0,0.1) !important;
		border: 1rpx solid #fff;
		}
	 
		wx-swiper .wx-swiper-dot-active {
			
			background: #fff !important;
		}
	
	// 	 .uni-swiper-dot {
	// 			// 指示点元素默认样式
	// 			width: 9rpx !important;
	// 			height: 9upx !important;
	// 			background: #C0C0C0 !important;
	// 			border: 1rpx solid #fff;
	// 		}
	
	// 	 .uni-swiper-dot-active {
	// 			// 指示点元素激活（当前选中）状态样式
	// 			width: 32rpx !important;
	// 			height: 8rpx !important;
	// 			background: #fff !important;
	// 			border-radius: 4rpx;
	// 		}
	.topView {
		margin-top: 0;
		margin-left: 0;
		width: 100%;
		height: 384rpx;
	}
	.list {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
.gonggao{
			box-sizing: border-box;
			padding:0 16rpx;
			padding-top:10rpx ;
			width: 100%;
			height: 54px;
			background: #FFFFFF;
			box-shadow: 0px 4rpx 10rpx 0px rgba(0,0,0,0.1);
			border-radius: 0 0 8rpx 8rpx;
			text{
				width: 550rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
		.item {
			position: relative;
			margin-bottom: 20rpx;
			border-radius: 16rpx;
			overflow: hidden;

			.name {
				width: 100%;
				height: 100%;
				padding-left: 32rpx;
				box-sizing: border-box;
				position: absolute;
				left: 0;
				top: 0;
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_1 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(2, 86, 255, 0.8) 0%, rgba(2, 86, 255, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_2 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(14, 152, 105, 0.8) 0%, rgba(14, 152, 105, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_3 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 188, 2, 0.8) 0%, rgba(255, 188, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}

			.name_4 {
				/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0256ff+0,0256ff+100&0.9+0,0+100 */
				background: linear-gradient(to right, rgba(255, 2, 2, 0.8) 0%, rgba(255, 2, 2, 0) 100%);
				/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

			}
		}

		.i_img {
			width: 48rpx;
			height: 48rpx;
			margin-right: 10rpx;
		}

		.i_img1 {
			width: 28rpx;
			height: 28rpx;
			margin-right: 10rpx;
		}


	}


	.top {
		background-color: #fff;
		position: fixed;
		top: 0;
		left: 0;
		padding: 20rpx 32rpx;
	}

	.search {
		width: 620rpx;
		height: 72rpx;
		background: #F9F9F9;
		border-radius: 56rpx;
		opacity: 1;
		border: 1rpx solid #E6E6E6;
		padding: 0 10rpx;
		box-sizing: border-box;

		input {
			background: none;
			border: none;
			margin-left: 10rpx;
			width: 400rpx;
		}
	}
</style>